import React,{PureComponent} from 'react';
import { connect } from 'dva';
import { Button, Anchor ,Carousel, Menu,BackTop } from 'antd'
import styles from './Home.css';
import { Line, Cell } from './widgets'
import Top from './Top'
import News from './News'
import HeZuo from './HeZuo'
import Footer from './Footer'

const { Link } = Anchor

const SubMenu = Menu.SubMenu
const MenuGroup = Menu.ItemGroup;

const logoImg = require('../assets/logo.png')
const hdpTupian = require('../assets/hdp_tupian.png')
const zichanshuImg = require('../assets/zichanshu.jpg')
const duozichanImg = require('../assets/duozichan.jpg')
const gqImg = require('../assets/gq.png')
const luxiantuImg = require('../assets/luxiantu.jpg')

const cellOneImg = require('../assets/cell/DFL.png')
const cellOneOverImg = require('../assets/cell/DFL_over.png')

const cellTwoImg = require('../assets/cell/yuyanji.png')
const cellTwoOverImg = require('../assets/cell/yuyanji_over.png')

const cellThreeImg = require('../assets/cell/UXTO.png')
const cellThreeOverImg = require('../assets/cell/UXTO_over.png')

const cellFourImg = require('../assets/cell/xieyijian.png')
const cellFourOverImg = require('../assets/cell/xieyijian_over.png')




class IndexPage extends PureComponent {
  componentDidMount() {
  }
  render() {
    return (
      <div id="top" className={styles.full}>
        <BackTop />
        <div className={styles.top}>
          <div className={styles.topContent}>
            <Top />
            <div className={styles.tcTopChou}>
              链接真实资产到虚拟世界的桥梁
            </div>
            <div className={styles.tcTopYin}><Button ghost>白皮书</Button></div>
            <div className={styles.tcTopMou}>
              <img src={hdpTupian} width="800px" />
            </div>
          </div>
        </div>
        <div id="special" className={styles.chou}>
          <div className={styles.chouLeft}>
            <div className={styles.chouLeftImg}>
              <img src={zichanshuImg} width="300px" />
            </div>
          </div>
          <div className={styles.chouRight}>
            <div className={styles.chouRightTitle}>
              <Line />
              <div className={styles.chouRightTitleTwo}>资产树</div>
            </div>
            <div className={styles.chouRightContent}>
              基于DFL技术构建的分布式体系，具有一致性强、应用隔离、高并发、可扩展的特性，包括系统主链及真实资产的子链，通过切断交易双方的关联性，使得交易历史不可跟踪，最大程度保持交易和资产的私密性
            </div>
          </div>
        </div>
        <div className={styles.yin}>
          <Cell image={cellOneImg} title="DFL" content="一致性强、应用隔离、高并发的分布式账本体系，用于资产的登记、管理和流转"/>
          <Cell image={cellTwoImg} title="智能预言机" content="支持资产在网络中进行交易时自带智能合约，增强发行方对资产的控制力" />
          <Cell image={cellThreeImg} title="UXTO" content="切断交易的关联性，保证交易及资产的私密性"/>
          <Cell image={cellFourImg} title="协议栈" content="发行时内嵌法律协议栈，确保交易及所持有的资产被各国法律所承认"/>
        </div>
        <div className={styles.mou}>
          <div className={styles.chouLeft}>
            <div className={styles.chouLeftContent}>
              <div className={styles.chouRightTitle}>
                <Line />
                <div className={styles.chouRightTitleTwo}>资产树</div>
              </div>
              <div className={styles.chouRightContent}>
                SharesChain 可以将多种类型的资产在链上进行登记、交易、并完成链下资产的交割的法律环节
              </div>
            </div>
          </div>
          <div className={styles.chouRight}>
            <div className={styles.chouLeftImg}>
              <img src={duozichanImg} width="400px" />
            </div>
          </div>
        </div>
        <div className={styles.chen}>
          <img src={gqImg} height="350px"/>
        </div>
        <div id="luxian" className={styles.si}>
          <div className={styles.siTxt}>路线图</div>
          <img src={luxiantuImg} height="430px" />
        </div>
        <div id="zixun" className={styles.wu}>
          <div className={styles.wuTitle}>项目新闻</div>
          <News />
        </div>
        <HeZuo />
        <Footer />
      </div>
    )
  }
}



export default connect()(IndexPage);
